<template>
  <div class="container">
    <h2>欢迎登录</h2>
    <p v-if="errorMessage" class="error-message">{{ errorMessage }}</p> <!-- New element -->
    <form>
      <div class="form-group">
        <label for="username">用户名:</label>
        <input type="text" id="username" v-model="username" placeholder="请输入用户名" required>
      </div>
      <div class="form-group">
        <label for="password">密码:</label>
        <input type="password" id="password" v-model="password" placeholder="请输入密码" required>
      </div>
      <div class="form-group flex-row">
        <div class="remember-checkbox">
          <input type="checkbox" id="remember" v-model="rememberPassword">
          <label for="remember">记住密码</label>
        </div>
        <a href="#"  class="forgot-password-link" @click="openForgotPasswordModal">忘记密码</a>
      </div>
      <div class="form-group">
        <button @click="login" class="btn">登录</button>
      </div>
    </form>
    <Divider  plain dashed style="font-size: 13px;color: #666666">登录方式</Divider>
    <p style="text-align: center;font-size: 15px;color: red;margin-top: 5px">使用JumpServer账号密码登录</p>
  </div>
</template>

<script>
import router from "@/router/router";
import axios from 'axios';
import Cookies from 'js-cookie';


export default {
  name: 'LoginMoudle',
  data() {
    return {
      username: '',
      password: '',
      errorMessage: '',
      rememberPassword: false
    }
  },
  methods: {
    login(event){
      event.preventDefault(); // 阻止默认表单的提交行为
      // 根据rememberPassword的值判断是否记住密码
      if (this.rememberPassword) {
        localStorage.setItem('username', this.username);
        localStorage.setItem('password', this.password);
      } else {
        localStorage.removeItem('username');
        localStorage.removeItem('password');
      }
      //请求接口
      axios.post('http://172.30.53.223:8888/api/login',{
        username: this.username,
        password: this.password,
      })
          .then(response => {
            if (response.status === 200) {
              // 登录成功，执行相应的操作
              const token = response.data.token;
              Cookies.set('front-token', token);
              router.push("/dashboard")
            }
          })
          .catch(() => {
            // 处理请求错误
            this.errorMessage  = '账号或密码错误，请重新输入';
          });
    },
    openForgotPasswordModal(){
      // 在这里打开一个模态框或触发一个事件，以处理忘记密码的逻辑
      const url = 'http://200.200.0.18:8888';
      window.open(url)
    }
  },
  mounted() {
    // 从localStorage中获取之前记住的用户名和密码
    const username = localStorage.getItem('username');
    const password = localStorage.getItem('password');
    if (username && password) {
      this.username = username;
      this.password = password;
      this.rememberPassword = true;
    }
  }
}
</script>

<style scoped>
.container {
  width: 400px;
  margin: 100px auto;
  padding: 20px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.container h2 {
  text-align: center;
  color: #333;
  margin-bottom: 20px;
}

.container .error-message {
  text-align: center;
  color: red;
  margin-bottom: 10px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  color: #666;
}

.form-group input[type="text"],
.form-group input[type="password"] {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 3px;
}

.form-group .btn {
  width: 100%;
  padding: 10px;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  background-color: #007bff;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

.form-group .btn:hover {
  background-color: #0056b3;
}

.remember-checkbox {
  display: flex;
  align-items: center;
}

.remember-checkbox label {
  margin-left: 5px;
}

.form-group.flex-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.forgot-password-link {
  margin-left: 5px;
  color: #007bff;
  text-decoration: none;
}

.forgot-password-link:hover {
  text-decoration: underline;
}
.notification-text {
  text-align: center;
  margin-top: 10px;
  color: #666;
}
</style>
